<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫雷游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .game-container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }

        h1 {
            color: white;
            text-align: center;
            margin-bottom: 20px;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }

        .game-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            color: white;
            font-size: 1.2em;
            font-weight: bold;
        }

        .controls {
            text-align: center;
            margin-bottom: 20px;
        }

        .difficulty-btn, .reset-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 10px 20px;
            margin: 5px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .difficulty-btn:hover, .reset-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }

        .difficulty-btn.active {
            background: rgba(255, 255, 255, 0.4);
        }

        .game-board {
            display: grid;
            gap: 2px;
            background: rgba(0, 0, 0, 0.2);
            padding: 10px;
            border-radius: 10px;
            margin: 0 auto;
        }

        .cell {
            width: 30px;
            height: 30px;
            background: rgba(255, 255, 255, 0.8);
            border: none;
            cursor: pointer;
            font-weight: bold;
            font-size: 14px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .cell:hover {
            background: rgba(255, 255, 255, 0.9);
            transform: scale(1.05);
        }

        .cell.revealed {
            background: rgba(255, 255, 255, 0.4);
            cursor: default;
        }

        .cell.flagged {
            background: #ff6b6b;
            color: white;
        }

        .cell.mine {
            background: #ff4757;
            color: white;
        }

        .cell.number-1 { color: #0066cc; }
        .cell.number-2 { color: #228B22; }
        .cell.number-3 { color: #ff0000; }
        .cell.number-4 { color: #800080; }
        .cell.number-5 { color: #800000; }
        .cell.number-6 { color: #40e0d0; }
        .cell.number-7 { color: #000000; }
        .cell.number-8 { color: #808080; }

        .game-status {
            text-align: center;
            margin-top: 20px;
            font-size: 1.5em;
            color: white;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }

        .win {
            color: #4ecdc4;
        }

        .lose {
            color: #ff6b6b;
        }

        @media (max-width: 768px) {
            .cell {
                width: 25px;
                height: 25px;
                font-size: 12px;
            }
            
            h1 {
                font-size: 2em;
            }
            
            .game-container {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1>🚩 扫雷游戏 💣</h1>
        
        <div class="game-info">
            <div>💣 剩余地雷: <span id="mineCount">10</span></div>
            <div>⏱️ 时间: <span id="timer">0</span></div>
        </div>

        <div class="controls">
            <button class="difficulty-btn active" data-difficulty="easy">简单 (9×9, 10雷)</button>
            <button class="difficulty-btn" data-difficulty="medium">中等 (16×16, 40雷)</button>
            <button class="difficulty-btn" data-difficulty="hard">困难 (16×30, 99雷)</button>
            <button class="reset-btn" onclick="resetGame()">🔄 重新开始</button>
        </div>

        <div id="gameBoard" class="game-board"></div>
        <div id="gameStatus" class="game-status"></div>
    </div>

    <script>
        let gameState = {
            board: [],
            revealed: [],
            flagged: [],
            mines: [],
            rows: 9,
            cols: 9,
            mineCount: 10,
            gameOver: false,
            gameWon: false,
            firstClick: true,
            timer: 0,
            timerInterval: null
        };

        const difficulties = {
            easy: { rows: 9, cols: 9, mines: 10 },
            medium: { rows: 16, cols: 16, mines: 40 },
            hard: { rows: 16, cols: 30, mines: 99 }
        };

        function initGame(difficulty = 'easy') {
            const config = difficulties[difficulty];
            gameState = {
                board: [],
                revealed: [],
                flagged: [],
                mines: [],
                rows: config.rows,
                cols: config.cols,
                mineCount: config.mines,
                gameOver: false,
                gameWon: false,
                firstClick: true,
                timer: 0,
                timerInterval: null
            };

            clearInterval(gameState.timerInterval);
            createBoard();
            updateDisplay();
        }

        function createBoard() {
            const board = document.getElementById('gameBoard');
            board.innerHTML = '';
            board.style.gridTemplateColumns = `repeat(${gameState.cols}, 1fr)`;

            gameState.board = Array(gameState.rows).fill().map(() => Array(gameState.cols).fill(0));
            gameState.revealed = Array(gameState.rows).fill().map(() => Array(gameState.cols).fill(false));
            gameState.flagged = Array(gameState.rows).fill().map(() => Array(gameState.cols).fill(false));

            for (let row = 0; row < gameState.rows; row++) {
                for (let col = 0; col < gameState.cols; col++) {
                    const cell = document.createElement('button');
                    cell.className = 'cell';
                    cell.dataset.row = row;
                    cell.dataset.col = col;
                    cell.addEventListener('click', () => handleCellClick(row, col));
                    cell.addEventListener('contextmenu', (e) => {
                        e.preventDefault();
                        handleRightClick(row, col);
                    });
                    board.appendChild(cell);
                }
            }
        }

        function placeMines(excludeRow, excludeCol) {
            gameState.mines = [];
            let minesPlaced = 0;

            while (minesPlaced < gameState.mineCount) {
                const row = Math.floor(Math.random() * gameState.rows);
                const col = Math.floor(Math.random() * gameState.cols);

                if (gameState.board[row][col] !== -1 && 
                    !(row === excludeRow && col === excludeCol)) {
                    gameState.board[row][col] = -1;
                    gameState.mines.push([row, col]);
                    minesPlaced++;

                    // 更新周围数字
                    for (let dr = -1; dr <= 1; dr++) {
                        for (let dc = -1; dc <= 1; dc++) {
                            const newRow = row + dr;
                            const newCol = col + dc;
                            if (newRow >= 0 && newRow < gameState.rows &&
                                newCol >= 0 && newCol < gameState.cols &&
                                gameState.board[newRow][newCol] !== -1) {
                                gameState.board[newRow][newCol]++;
                            }
                        }
                    }
                }
            }
        }

        function handleCellClick(row, col) {
            if (gameState.gameOver || gameState.flagged[row][col]) return;

            if (gameState.firstClick) {
                placeMines(row, col);
                gameState.firstClick = false;
                startTimer();
            }

            if (gameState.board[row][col] === -1) {
                gameOver(false);
                return;
            }

            revealCell(row, col);
            updateDisplay();
            checkWin();
        }

        function handleRightClick(row, col) {
            if (gameState.gameOver || gameState.revealed[row][col]) return;

            gameState.flagged[row][col] = !gameState.flagged[row][col];
            updateDisplay();
        }

        function revealCell(row, col) {
            if (row < 0 || row >= gameState.rows || 
                col < 0 || col >= gameState.cols ||
                gameState.revealed[row][col] || 
                gameState.flagged[row][col]) return;

            gameState.revealed[row][col] = true;

            if (gameState.board[row][col] === 0) {
                for (let dr = -1; dr <= 1; dr++) {
                    for (let dc = -1; dc <= 1; dc++) {
                        revealCell(row + dr, col + dc);
                    }
                }
            }
        }

        function updateDisplay() {
            const cells = document.querySelectorAll('.cell');
            let flagCount = 0;

            cells.forEach(cell => {
                const row = parseInt(cell.dataset.row);
                const col = parseInt(cell.dataset.col);
                
                cell.className = 'cell';
                cell.textContent = '';

                if (gameState.flagged[row][col]) {
                    cell.classList.add('flagged');
                    cell.textContent = '🚩';
                    flagCount++;
                } else if (gameState.revealed[row][col]) {
                    cell.classList.add('revealed');
                    if (gameState.board[row][col] === -1) {
                        cell.classList.add('mine');
                        cell.textContent = '💣';
                    } else if (gameState.board[row][col] > 0) {
                        cell.classList.add(`number-${gameState.board[row][col]}`);
                        cell.textContent = gameState.board[row][col];
                    }
                }
            });

            document.getElementById('mineCount').textContent = gameState.mineCount - flagCount;
            document.getElementById('timer').textContent = gameState.timer;
        }

        function startTimer() {
            gameState.timerInterval = setInterval(() => {
                gameState.timer++;
                document.getElementById('timer').textContent = gameState.timer;
            }, 1000);
        }

        function gameOver(won) {
            gameState.gameOver = true;
            gameState.gameWon = won;
            clearInterval(gameState.timerInterval);

            if (!won) {
                // 显示所有地雷
                gameState.mines.forEach(([row, col]) => {
                    gameState.revealed[row][col] = true;
                });
                updateDisplay();
                document.getElementById('gameStatus').innerHTML = '<span class="lose">💥 游戏结束！</span>';
            } else {
                document.getElementById('gameStatus').innerHTML = '<span class="win">🎉 恭喜获胜！</span>';
            }
        }

        function checkWin() {
            let revealedCount = 0;
            for (let row = 0; row < gameState.rows; row++) {
                for (let col = 0; col < gameState.cols; col++) {
                    if (gameState.revealed[row][col]) revealedCount++;
                }
            }

            if (revealedCount === gameState.rows * gameState.cols - gameState.mineCount) {
                gameOver(true);
            }
        }

        function resetGame() {
            const activeDifficulty = document.querySelector('.difficulty-btn.active').dataset.difficulty;
            initGame(activeDifficulty);
            document.getElementById('gameStatus').textContent = '';
        }

        // 难度选择
        document.querySelectorAll('.difficulty-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                document.querySelectorAll('.difficulty-btn').forEach(b => b.classList.remove('active'));
                e.target.classList.add('active');
                initGame(e.target.dataset.difficulty);
                document.getElementById('gameStatus').textContent = '';
            });
        });

        // 初始化游戏
        initGame();
    </script>
</body>
</html>
